<template>
	<jk-dialog
		v-model="showDialog"
		title="选择-点位"
		width="900px"
		:show-content-loading="tableLoading"
		append-to-body
		@on-cancel="onVisibleChange(false)"
		@on-visible-change="onVisibleChange"
		@on-confirm="onConfirmBtn"
	>
		<div ref="box1" class="flex-end-center margin-bottom-4">
			<jk-search-input v-model="searchParams.name" class="item-gap search-bar-item-size3" placeholder="点位名称" @on-enter="onSearchBtn"></jk-search-input>
			<jk-search-button style="margin-right: 2px;" @click="onSearchBtn"></jk-search-button>
		</div>
		<div v-if="!tableData || !tableData.length" class="flex-center no-data">无</div>
		<div class="flex-start-center-wrap" :style="{height: `${dialogTableHeight - 50}px`, overflow: 'auto', alignContent: 'flex-start'}">
			<div
				v-for="(item, index) in tableData || []"
				:key="index"
				:style="{width: `calc(100% / 5)`, padding: '2px 2px'}"
				style="box-sizing: border-box;margin-right: 0;"
			>
				<el-button
					class="width-100-percent text-ellipsis"
					size="small"
					border
					:disabled="!!defaultSelectRows.find(x => x.signalId === item.id)"
					:type="checkArr.find(x => x.id === item.id) ? 'primary' : 'default'"
					@click="onSelectItem(item)"
				>{{ item.name }}</el-button>
			</div>
		</div>
	</jk-dialog>
</template>
<script>
    import calDialogHeight from '../../../../mixins/cal-dialog-height';
    import createDialog from '../../../material/base/save-dialog';
    import { productionIotMachineGetAllSingle } from '../../../../api/machine/machineArchives';

    export default {
        components: {
            createDialog
        },
        mixins: [calDialogHeight],
        props: {
            dialogState: {
                type: Boolean,
                default: false
            },
            machineCode: {
                type: String,
                default: ''
            },
            defaultSelectRows: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        data() {
            return {
                createDialogState: false,
                treeData: [],
                searchParams: {
                    name: '',
                    number: ''
                },
                checkArr: [],
                showLoading: false,
                tableData: [],
                showDialog: false,
                tableLoading: false
            };
        },
        methods: {
            onSearchBtn() {
                this.getListRequest();
            },
            onSelectItem(item) {
                const has = this.checkArr.some(x => x.id === item.id);
                if (has) {
                    const arr = this.checkArr.filter(x => x.id !== item.id);
                    this.checkArr = arr;
                } else {
                    this.checkArr.push(item);
                }
            },
            onVisibleChangeOfCreateDialog(e) {
                this.createDialogState = e;
            },
            onConfirmBtn() {
                if (this.checkArr.length) {
                    const arr = this.checkArr.filter(x => !x._disabled);
                    this.$emit('on-confirm', arr);
                } else {
                    this.$tipsBar(this, 'custom', 'warning', '请选择数据');
                }
            },
            getListRequest() {
                this.checkArr = [];
                if (!this.machineCode) return;
                this.tableLoading = true;
                return productionIotMachineGetAllSingle(this.searchParams).then(res => {
                    this.tableLoading = false;
                    this.tableData = [];
                    if (res.data.status === 200) {
                        this.tableData = res.data.res || [];
                    }
                });
            },
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
                if (!e) {
                    Object.assign(this.$data, this.$options.data());
                }
            },
            async getDependentData() {
                this.tableLoading = true;
                await this.getListRequest();
            }
        },
        watch: {
            dialogState(newVal) {
                this.showDialog = newVal;
                if (newVal) {
                    this.$set(this.searchParams, 'number', this.machineCode);
                    this.getDependentData();
                }
            }
        }
    };
</script>
<style scoped lang="scss">
.no-data {
    font-size: 13px;
    color: #515a6e;
}
</style>
